<template>
    <div style="height: 100%">
        <wl-content-top>
            <template slot="header">
                <Row>
                    <Col span="24">
                        <Input v-model="value" class="wl-mr" placeholder="Enter something..." style="width: 300px"/>
                        <Button type="primary">查询</Button>
                    </Col>
                </Row>
            </template>
            <template slot="body">
                <Row class="wl-content">
                    <Col span="24" class="">
                        <div class="wl-content-group">
                            <Button class="wl-content-button" type="primary" @click="addAction">新增</Button>
                            <Button type="error" @click="delSelect">批量删除</Button>
                        </div>
                    </Col>
                    <Col span="24">
                        <Table border stripe ref="selection" :loading="loading" :columns="tableHeader" :data="tableData"
                               @on-selection-change="tableSelectChange">
                            <template slot="action" slot-scope="{ row }">
                                <Button class="wl-content-button" type="primary" size="small" @click="editAction(row)">
                                    编辑
                                </Button>
                                <Button type="error" size="small" @click="delOne(row.id)">删除</Button>
                            </template>
                        </Table>
                    </Col>
                </Row>
                <Row type="flex" justify="space-between" class="wl-footer">
                    <Col span="14">
                        <Button @click="handleSelectAll(true)" class="wl-content-button">全选</Button>
                        <Button @click="handleSelectAll(false)">取消</Button>
                    </Col>
                    <Col span="10">
                        <Page :total="apiResult.totalRecord" show-total show-sizer @on-change="pageChange"
                              @on-page-size-change="pageSizeChange"/>
                    </Col>
                </Row>
            </template>
        </wl-content-top>
        <wl-model-form :show="modelFormShow" :options="options" @result="formResult" @cancelShow="cancelShow"
                       ref="wlModelForm"></wl-model-form>
    </div>
</template>
<script>
import { templateAction } from '@/api/google'

export default {
  data () {
    return {
      value: '',
      loading: false,
      modelFormShow: false,
      page: {
        pageSize: 10,
        page: 1
      },
      apiResult: {},
      tableHeader: [
        {
          type: 'selection',
          title: '编号',
          width: 60,
          align: 'center'
        },
        {
          title: '模版名称',
          key: 'title'
        },
        {
          title: '模版内容',
          key: 'content'
        }, {
          title: '创建时间',
          key: 'create_time'
        }, {
          title: '操作',
          slot: 'action'
        }
      ],
      tableData: [],
      options: {
        // 表单属性 非必需
        formProps: {
          'label-width': 80
        },
        // 表单数据 必需
        formData: {
          id: '',
          title: '',
          content: '',
          is_site: ''
        },
        // 表单项组件数据 必需
        formItem: [
          {
            type: 'input',
            key: 'title',
            label: '模版名称',
            props: {
              placeholder: '模版名称...'
            },
            rules: {
              required: true,
              message: '请输入模版名字',
              trigger: 'blur'
            }
          },
          {
            type: 'input',
            label: '模版内容',
            key: 'content',
            props: {
              placeholder: '',
              type: 'textarea'
            },
            rules: {
              required: true,
              trigger: 'blur',
              message: '请留下您宝贵的意见'
            }
          },
          {
            type: 'select',
            label: '是否替换域名',
            key: 'is_site',
            children: [
              {
                value: '1',
                label: '公司社会关系'
              },
              {
                label: '指定区域查询',
                value: '2'
              }, {
                label: '社交平台',
                value: '3'
              }, {
                label: '年销售额查询',
                value: '4'
              }, {
                label: '企业类型查询',
                value: '5'
              }
            ]
          }
        ]
      }
    }
  },
  computed: {
    initMarginLeft () {
      return this.resultData[0].parent_ids.split(',').length - 1
    }
  },
  mounted () {
    this.getTemplateList(this.page)
  },
  methods: {
    getTemplateList (param) {
      this.loading = true
      templateAction(param, 'get').then(ret => {
        this.loading = false
        let data = ret.data
        if (data.errcode === 1001) {
          this.tableData = data.data.results
          this.apiResult = data.data
        }
      })
    },
    handleSelectAll (status) {
      this.$refs.selection.selectAll(status)
    },
    tableSelectChange (selection) {
      this.selectData = selection
    },
    formResult (data) {
      templateAction(data, 'post').then(ret => {
        this.modelFormShow = false
        this.getTemplateList(this.page)
      })
    },
    cancelShow () {
      this.modelFormShow = false
    },
    editAction (row) {
      this.options.formData = {
        id: row.id,
        title: row.title,
        content: row.content,
        is_site: row.is_site
      }
      this.modelFormShow = true
    },
    addAction () {
      this.options.formData = {
        id: '',
        title: '',
        content: '',
        is_site: false
      }
      this.modelFormShow = true
    },
    pageChange (e) {
      this.page.page = e
      this.getTemplateList(this.page)
    },
    pageSizeChange (e) {
      this.page.pageSize = e
      this.page.page = 1
      this.getTemplateList(this.page)
    },
    delSelect () {
      let delList = this.selectData
      let ids = []
      if (delList.length <= 0) {
        this.$Message.error('请选择要删除的数据')
        return false
      }
      delList.forEach((item, index) => {
        ids.push(item.id)
      })
      templateAction({ ids: JSON.stringify(ids) }, 'delete').then(ret => {
        if (ret.data.errcode === 1001) {
          this.getTemplateList(this.page)
        } else {
          this.$Message.error('删除失败')
        }
      })
    },
    delOne (id) {
      templateAction({ ids: JSON.stringify([id]) }, 'delete').then(ret => {
        if (ret.data.errcode === 1001) {
          this.getTemplateList(this.page)
        } else {
          this.$Message.error('删除失败')
        }
      })
    }
  }
}
</script>

<style scoped lang="less">
    .wl-content {
        margin-bottom: 10px;

        &-group {
            margin: 10px;
        }

        &-button {
            margin-right: 10px;
        }
    }

</style>
